<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <nav-bar :title="title"  @goBack="onClickLeft"/>
    <!-- <van-nav-bar class="main-header" title="我的团队" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <!-- 主体内容 -->
    <div class="main-content has-header-space">
      <div class="team">
        <div class=""  v-if="type === 'vip'">
          <div class="team_vip_total">
            <div class="my_num">
              <div :class="select_opt === 'vip' ? 'my_num_left active' : 'my_num_left'" @click="selectItem('vip')">
                <div class="left_num">{{vip_total}}</div>
                <div class="left_label">当前合计</div>
              </div>
              <div :class="select_opt === 'zz_vips' ? 'my_num_left active' : 'my_num_left'" @click="selectItem('zz_vips')">
                <div class="left_num">{{vip_zz_total}}</div>
                <div class="left_label">直接邀请</div>
              </div>
              <div :class="select_opt === 'jj_vips' ? 'my_num_left active' : 'my_num_left'" @click="selectItem('jj_vips')">
                <div class="left_num">{{vip_jj_total}}</div>
                <div class="left_label">间接邀请</div>
              </div>
              <!-- <div class="center_hr"></div> -->
              <div :class="select_opt === 'new_vips' ? 'my_num_left active' : 'my_num_left'" @click="selectItem('new_vips')">
                <div class="left_num">{{vip_new_total > 0 ? '+' + vip_new_total : vip_new_total}}</div>
                <div class="left_label">今日新增</div>
              </div>
            </div>
          </div>
          <div class="datalist">
            <van-list class="taem_datalist" v-model="vip_page.loading" error-text="请求失败，点击重新加载" @load="onLoad('vip')" loading-text="正在加载中" :finished="vip_page.finished">
              <div class="taem_datalist">
                <Item type="vip" v-for="(item, index) in vip_list" :item="item" v-bind:key="index"></Item>
              </div>
            </van-list>
            <NotData v-if="!vip_list.length && !vip_page.loading"/>
          </div>
        </div>
        <div class="" v-if="type === 'fans'">
          <div class="team_vip_total">
            <div class="my_num">
              <div :class="select_opt === 'fans' ? 'my_num_left active' : 'my_num_left'"  @click="selectItem('fans')">
                <div class="left_num">{{fans_total}}</div>
                <div class="left_label">
                  <div class="my_fans">当前合计
                    <!-- <span class="tips" @click="openTips"></span> -->
                  </div>
                </div>
              </div>
              <!-- <div class="center_hr"></div> -->
              <div :class="select_opt === 'new_fans' ? 'my_num_left active' : 'my_num_left'"  @click="selectItem('new_fans')">
                <div class="left_num">{{fans_new_total > 0 ? '+' + fans_new_total : fans_new_total}}</div>
                <div class="left_label">今日新增</div>
              </div>
              <div :class="select_opt === 'invalid_fans' ? 'my_num_left active' : 'my_num_left'"  @click="selectItem('invalid_fans')">
                <div class="left_num">{{invalid_total > 0 ? '-' + invalid_total : invalid_total}}</div>
                <div class="left_label">今日递减</div>
              </div>
            </div>
          </div>
          <div class="datalist">
            <div class="invalid_fans" v-if="select_opt === 'invalid_fans'">以下粉丝未在15天内升级为超级会员，已与您解除关系。快去重新邀请ta吧！</div>
            <van-list v-model="fans_page.loading" error-text="请求失败，点击重新加载" @load="onLoad('fans')" loading-text="正在加载中" :finished="fans_page.finished">
              <div class="taem_datalist">
                <Item type="fans" v-for="(item, index) in fans_list" :item="item" v-bind:key="index"></Item>
              </div>
            </van-list>
            <NotData v-if="!fans_list.length && !fans_page.loading"/>
          </div>
        </div>
      </div>
    </div>
    <van-dialog v-model="is_show_tips"  use-slot class="fantps_dialog" confirmButtonText="我知道啦">
      <div class="fans_tips">
        <h3 class="fans_tips_title">什么是我的粉丝？</h3>
        <div class="p">
          美家美货会员均可以分享他人注册成为会员，经会员分享而注册的新会员均为老会员的粉丝，粉丝关系终身绑定。
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import NotData from '@/components/global/not-data.vue'
import Item from '@/components/merber/team/item.vue'
import NavBar from '@/components/global/nav-bar.vue'
import Tool from '@/utils/tool.js'

export default {
  components: { Item, NotData, NavBar },
  data () {
    return {
      active: 0,
      vip_total: 0,
      vip_new_total: 0,
      vip_jj_total: 0,
      vip_zz_total: 0,
      offset_top: 0,
      is_show_tips: false,
      fans_total: 0,
      fans_new_total: 0,
      vip_list: [],
      fans_list: [],
      vip_page: {
        curr_page: 0,
        finished: false,
        loading: true
      },
      fans_page: {
        curr_page: 0,
        finished: false,
        loading: true
      },
      title: '',
      type: '',
      select_opt: 'vip',
      invalid_total: 0,
      is_loading: true
    }
  },
  created () {
    this.type = this.$route.query.type
    this.select_opt = this.$route.query.type
    let isClient = Tool.isClient()
    if (this.$route.query.type === 'vip') {
      this.title = '已邀会员'
      document.title = '已邀会员'
      if (isClient) {
        window.location.href = 'yggtitle://' + encodeURIComponent('已邀会员')
      }
    } else if (this.$route.query.type === 'fans') {
      this.title = '已邀粉丝'
      document.title = '已邀粉丝'
      window.location.href = 'yggtitle://' + encodeURIComponent('已邀粉丝')
    }
    this.getDataList(this.$route.query.type, 'ref')
  },
  beforeUpdate () {
    let dom = document.getElementsByClassName('main-header')
    if (dom && dom[0]) {
      let dh = dom[0].clientHeight || dom[0].offsetHeight
      this.offset_top = dh
    }
  },

  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    selectItem (type) {
      console.log(type)
      if (!this.is_loading) {
        this.select_opt = type
        this[this.type + '_page'].curr_page = 0
        this.getDataList(this.type, 'ref')
      }
    },
    openMsg: function () {
      console.log('打开客服')
    },
    openTips () {
      this.is_show_tips = true
    },
    onLoad (type) {
      this[type + '_page'].curr_page = this[type + '_page'].curr_page + 1
      this.getDataList(type)
    },

    getDataList (type, ref) {
      this.is_loading = true
      let page = this[type + '_page'].curr_page
      console.log(page)
      let keyword = this.keyword
      let data = {
        type: this.select_opt, page: page, user_nickname: keyword
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_team', params: data, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this[type + '_page'].total = resp.data.total
            if (resp.data.list.length < 10) {
              this[type + '_page'].finished = true
            } else {
              this[type + '_page'].finished = false
            }
            if (ref === 'ref') {
              this[type + '_list'] = resp.data.list
            } else {
              this[type + '_list'] = this[type + '_list'].concat(resp.data.list)
            }
            this[type + '_page'].loading = false
            if (this.select_opt === 'vip' || this.select_opt === 'fans') {
              this[type + '_total'] = resp.data.total
            }
            if (resp.data.new_total) {
              this[type + '_new_total'] = resp.data.new_total
            }
            if (resp.data.jj_total) {
              this[type + '_jj_total'] = resp.data.jj_total ? resp.data.jj_total : 0
            }
            if (resp.data.zz_total) {
              this[type + '_zz_total'] = resp.data.zz_total ? resp.data.zz_total : 0
            }
            if (resp.data.invalid_total) {
              this.invalid_total = resp.data.invalid_total ? resp.data.invalid_total : 0
            }
          }
          this.is_loading = false
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.is_loading = false
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>

<style lang="css" scoped>
</style>
